<template>
	<div class="cate-tab2">
		<div class="cate-ol">
			<template v-for="item in tabs2List">
				<article v-if="item.id==1" :key='item.id'>
					<img :src="item.imgURL" />
					<label>
					{{item.title}}—&nbsp;{{item.msg}}
					<span>￥{{item.price}}</span>
					</label>
				</article>
			</template>
		</div>
		<div class="cate-tab3 swiper">
			<ul class="cate-ul swiper-wrapper">
				<template v-for="item in tabs2List">
					<li v-if="item.id!=1" :key='item.id' class="swiper-slide">
						<em>{{item.city}}</em>
						<img :src="item.imgURL" />
						<p>{{item.title}}</p>
						<h4>{{item.msg}}</h4>
						<strong>￥{{item.price}}起</strong>
					</li>
				</template>	
			</ul>
		</div>
	</div>
</template>
<script>
	import {onMounted} from 'vue';
	//2.引入Swiper的动态组件
	 import Swiper,{
		 Autoplay,
		 EffectCoverflow,
		 EffectCube,
		 Pagination,
	 } from 'swiper';
	 
	 //3.swier组件应用配置
	 Swiper.use([ Autoplay, EffectCoverflow, EffectCube, Pagination,])
	export default{
		name:'CategoryTab2s',
<<<<<<< HEAD
=======
		// props:['propscatetwo'],
>>>>>>> d0d9ac1 (首页)
		data(){
			return{
				tabs2List : [
					{id:1,imgURL:require('../../../assets/tabs/tab2-4.webp'),title:'长隆野生动物世界',msg:'《爸爸去哪儿》拍摄地',city:'广州出发',price:286},
					{id:2,imgURL:require('../../../assets/tabs/tab2-1.jpg'),title:'帽子峰旅游景区',msg:'有“粤北九寨沟”之美誉',city:'广州出发',price:47.6},
					{id:3,imgURL:require('../../../assets/tabs/tab2-2.jpg'),title:'长隆欢乐世界',msg:'《奔跑吧兄弟》拍摄地',city:'广州出发',price:223},
					{id:4,imgURL:require('../../../assets/tabs/tab2-3.jpg'),title:'深圳野生动物园',msg:'观赏世界各地珍禽名兽',city:'广州出发',price:99},
					{id:5,imgURL:require('../../../assets/tabs/1.jpg'),title:'东北冰雪休闲',msg:'11-2月哈尔滨冰雪首推路线',city:'广州出发',price:56},
					{id:6,imgURL:require('../../../assets/tabs/2.jpg'),title:'北疆冬摄',msg:'雪国喀纳斯、水墨禾木，伊犁天鹅泉',city:'广州出发',price:123},
					{id:7,imgURL:require('../../../assets/tabs/3.jpg'),title:'徒步雨崩',msg:'游侠客高海拔徒步TOP1',city:'广州出发',price:239},
				]
			}
		},
		setup(){
			onMounted(()=>{
				new Swiper('.cate-tab3',{
					slidesPerView : 3,  
				})
			})
<<<<<<< HEAD
		}
=======
		},
		// watch:{
		// 	propscateone(){
		// 		this.tab2List=this.propscatetwo.category_long
		// 	}
		// }
>>>>>>> d0d9ac1 (首页)
	}
</script>

<style scoped>
	.cate-tab2{
		width: 100%;
		height: 8rem;
		margin: 0.2rem auto;
		border-radius: 0.2rem;
	}
	.cate-ol{
		width: 100%;
		height: 3rem;
		background-color: #D3D3D3;
	}
	.cate-ol img{
		width: 100%;
		height: 100%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.cate-ol label{
		display: block;
		position: relative;
		height: 0.5rem;
		top: -0.7rem;
		background-color: rgba(0,0,0,0.4);
		padding: 0.1rem 0;
		color: white;
	}
	.cate-ol label span{
		position: relative;
		top: -0.35rem;
		font-size: 0.35rem;
		color: #e4862d;
		display: block;
		text-align: right;
		padding-right: 0.2rem;
	}
	.cate-tab3{
		margin: 0.5rem 0;
		border-radius: 0.2rem;
		width: 100%;
		height: 5rem;
		position: relative;
		top: -0.4rem;
	}
	.cate-ul{
		width: 100%;
		padding: 0.2rem 0.2rem;
		display: flex;
	}
	.cate-ul em{
		position: relative;
		top: 0.5rem;
		background-color: #323229;
		color: white;
		padding: 0.1rem 0.2rem;
		border-radius: 0.25rem 0 0.25rem 0;
	}
	.cate-ul li{
		width: 33%;
	}
	.cate-ul img{
		width: 90%;
		height: 60%;
		border-radius: 0.2rem;
	}
	
	.cate-ul p{
		font-weight: bold;
		padding: 0.15rem 0;
	}
	.cate-ul h4{
		/* padding: 0.1rem 0; */
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	.cate-ul strong{
		display: block;
		padding: 0.1rem 0;
		font-weight: bold;
		/* font-size: 0.4rem; */
		color: #ff8d2d;
	}
</style>
